import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
import { MyStorage } from '@/utils/utils'
import { TOKEN } from '@/global/globalVariables'
import { useUserStore } from '@/store/userStore'

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

// 路由守卫实现登录态校验
router.beforeEach(async (to, from, next) => {
  let token = MyStorage.get(TOKEN)
  // 使用pinia的操作必须放在这里
  const userStore = useUserStore()
  if (to.path === '/login') {
    next()
    return
  }
  if (token) {
    if (!userStore.userInfoDetail && userStore.routesAsync.length === 0) {
      // 初始化的时候这里可能因为没有用户数据无法获取列表信息，因此会在main组件中再次获取。因为main组件需要将数据传递给子组件
      // 但是每次刷新的时候总是先执行路由守卫这里的代码会成功获取列表
      // 进入后台管理界面的时候立即获取用户信息
      await userStore.getUserInfoDetailAction()
      // 代表还没有获取到用户所对应的权限列表数据
      let _newRoutes = await userStore.getRoutes()

      if (_newRoutes) {
        _newRoutes.forEach((item: any) => {
          router.addRoute('main', item)
        })
      }
      // 继续跳转
      next(to.path)
    } else {
      // 当路由表信息存在的时候处理部分跳转情况
      // 只要跳转的界面不存在则matched数组为0
      if (to.matched.length !== 0) {
        next()
      } else {
        ElMessage({
          message: '无权限访问',
          type: 'error'
        })
        // 原路返回
        next(from.path)
      }
    }
  } else {
    // 可以进行白名单处理
    next('/login')
  }
})
export default router
